<template>
	<view class="water_peopleinfo_index">
		<view class="user-box" style="display: flex;justify-content: center;">
			<view class="" style="width: 180rpx;">
				<image src="/static/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="" style="padding: 20rpx;">
			<uni-uform v-model="form"  ref="uform" :config="config" :rules="rules"  validate-trigger="bind">
				<template slot="phone">
					<view style="display: flex;align-items: center;">
						<uni-easyinput placeholder="未设置" v-model="form.phone"></uni-easyinput>
						<view class="" style="width: 80rpx;text-align: center;">
							<u-icon color="#409eff" style="font-size: 50rpx;" name="file-text-fill"></u-icon>
						</view>
						<view class="" style="width: 80rpx;text-align: center;">
							<u-icon color="#409eff" style="font-size: 50rpx;" name="phone-fill"></u-icon>
						</view>
						
					</view>
				</template>
			</uni-uform>
			<view class="" style="display: flex;justify-content: space-around;">
				<uni-button @click="sub">提交</uni-button>
				<uni-button>重置</uni-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: { // 建议申明属性与config数组的name保持一致
					qq:'未设置',
					wx:'未设置',
					phone:''
				},
				config: [{
						name: 'phone',
						label: '手机',
						isSlot:true,
						component: 'uni-easyinput',
						extra: {
							placeholder: "未设置",
						},
						event: {
							change: function(e) {
								console.log(e)
							},
							input: function(e) {
								console.log(e)
							}
						}
					},
					{
						name: 'qq',
						label: 'QQ',
						component: 'uni-easyinput',
						extra: {
							style: 'background-color: #fff;',
							localdata: []
						},
						event: {
							change: (e) => { // 操作 form字段的示例 改变config
								console.log(e, 'ss1', this)
							}
						}
					},
					{
						name: 'wx',
						label: '微信',
						component: 'uni-easyinput',
						extra: {
							placeholder: "未设置",
						},
						event: {
							change: function(e) {
								console.log(e)
							}
						}
					},
					{
						name: 'email',
						label: '邮箱',
						component: 'uni-easyinput',
						extra: {
						},
						event: {
							change: function(e) {
								console.log(e)
							}
						}
					},
					{
						name: 'workid',
						label: '工号',
						component: 'uni-easyinput',
						extra: {
						},
						event: {
							change: function(e) {
								console.log(e)
							}
						}
					},{
						name: 'workname',
						label: '岗位',
						component: 'uni-easyinput',
						extra: {
						},
						event: {
							change: function(e) {
								console.log(e)
							}
						}
					},{
						name: 'ctx',
						label: '备注',
						component: 'uni-easyinput',
						extra: {
						},
						event: {
							change: function(e) {
								console.log(e)
							}
						}
					}
					
				],
				rules: {
					ss_dl: {
						rules: [{
							required: true,
							errorMessage: '不能为空',
						}]
					},
					// // 对name字段进行必填验证
					ss_bm: {
						rules: [{
								required: true,
								errorMessage: '不能为空',
							},
							{
								minLength: 3,
								maxLength: 10,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号码',
							},
							{
								pattern: /^1[0-9]{10,10}$/,
								errorMessage: '请输入正确的手机号码',
								//     validateFunction: function(rule, value, data, callback) {
								// 		if (value.length > 20 || value.length < 8) {
								// 			callback('密码长度在8-20位！')
								// 		} else {
								// 		    callback();
								// 	    }
								// 	}
							}

						]
					}
				},
			}
		},
		methods: {
			sub() {
				let form = this.$refs.uform.getForm()
				form.validate().then(res => {
					console.log('表单数据信息：', res, this.form);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getItem(name) {
				return {
					item: this.config.find(res => res.name === name),
					index: this.config.findIndex(res => res.name === name)
				}
			},
			getItems(arr = []) {
				let obj = {}
				arr.map(res => {
					obj[res] = this.getItem(res)
				})
				return obj
			}
		}
	}
</script>

<style lang="scss" scoped>
	.water_peopleinfo_index {
		font-size: 40rpx;

		.user-box {
			display: flex;
			align-items: center;
			height: 300rpx;
			padding: 20rpx;
			width: 100%;
			color: #ffffff;
			background-image: url(/static/images/index/banner.png);
		}

	}
</style>